在昨天的總結中，提到作品展示區。今天專注於這個區塊的細節設計與實現。一個好的作品集，必須能清晰地展示每個作品。

使用 Grid 佈局來實現一個整齊的、響應式的作品展示區。
假設有 6 個作品，在電腦上是 3 欄，在平板上是 2 欄，在手機上是 1 欄。

在 index.html 中：

HTML

<div class="portfolio-grid">
  <div class="portfolio-item">
    <img src="https://picsum.photos/400/300?random=1" alt="作品一" />
    <h3>作品一標題</h3>
    <p>作品一的簡短描述。</p>
  </div>
  </div>

在 style.css 中：

CSS

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 預設 3 欄 */
  gap: 20px;
}
.portfolio-item {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  overflow: hidden;
}
.portfolio-item:hover {
  transform: translateY(-5px);
}
@media (max-width: 992px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板 2 欄 */
  }
}
@media (max-width: 600px) {
  .portfolio-grid {
    grid-template-columns: 1fr; /* 手機 1 欄 */
  }
}

這裡使用了 repeat(3, 1fr) 來簡化寫法，透過 Media Queries 實現了響應式佈局。

執行成果 :